<template>
  <div>

    <el-table :data="orderList"
              ref="orderTable"
              style="width: 100%"
              row-key="id">
      <el-table-column type="index"></el-table-column>

      <el-table-column :prop="index"
                       :label="item"
                       v-for="(item, index) in tableCoumnList"
                       :key="index"
                       :show-overflow-tooltip='true'>
        <template slot-scope="scope">
          <!-- <div v-if="item == `操作`">
            <el-button type="primary"
                       icon="el-icon-more"
                       @click="moreDetail(scope.row)"
                       circle> </el-button>

          </div> -->
          <div v-if="item==`订单状态`">
            <el-tag size="medium"
                    v-if="scope.row.status == 1 "> 待支付</el-tag>
            <el-tag size="medium"
                    v-else-if="scope.row.status == 2 "> 已支付</el-tag>
            <el-tag size="medium"
                    v-else-if="scope.row.status == 3 ">待发货</el-tag>
            <el-tag size="medium"
                    v-else-if="scope.row.status == 4 ">已收货</el-tag>
            <el-tag size="medium"
                    v-else-if="scope.row.status == 5">已取消</el-tag></el-tag>

          </div>
          <div v-else-if="item == `商品图片`">
            <el-image         :src="scope.row.productBean.productCoverImage">
            </el-image>

          </div>
          <div v-else-if="item == `商品描述` ">

            <div>{{scope.row.productBean.productDesc}}</div>

          </div>
          <div v-else-if="item == `订单金额` ">
            <div v-if="scope.row.orderPrice != null">{{scope.row.orderPrice}}</div>
           <div v-else>暂无数据</div>
          </div>
          <div v-else-if="item == `买家昵称`">
            <div>{{scope.row.buyerBean.customerName}}</div>
          </div>
          <div v-else-if="item == `卖家昵称`">
            <div>{{scope.row.sellBean.customerName}}</div>
          </div>
          <div v-else-if="item == `收货地址`" >
            <div v-if="scope.row.addressBean != null">{{scope.row.addressBean.detailAddress}}</div>
            <div v-else>暂无数据</div>
          </div>
          <div v-else-if="item == `发货时间`">
            <div v-if="scope.row.sendTime != null">{{scope.row.sendTime}}</div> 
            <div v-else>暂无数据</div>

          </div>

          <div v-else>
            {{ scope.row[index] }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   layout="total ,sizes, prev, pager, next"
                   :page-sizes="[2, 4]"
                   :currnt-page="this.currentPageNum"
                   :page-size="this.currentPageSize"
                   :total="this.totalNum">
    </el-pagination>

    <el-dialog title="123"
               :visible.sync="dialogVisible">

      <div>{{this.sellerInfo.id}}</div>
    </el-dialog>

  </div>

</template>

<script>
export default {
  name: 'OrderList',
  components: {},
  data() {
    return {
      //分页需要页码
      currentPageNum: 1,
      //分页需要的一页多少条
      currentPageSize: 2,
      // 分页需要的总数
      totalNum: 0,
      // 接口返回的数据
      orderList: [],
      tableCoumnList: {
        orderNo: "订单号",
        coverImage: "商品图片",
        productDesc: "商品描述",
        orderPrice: "订单金额",
        status: "订单状态",
        sendTime: "发货时间",
        closeTime: "关闭时间",
        endTime: "完成时间",
        createTime: "创建时间",
        sellName: "卖家昵称",
        buyerName: "买家昵称",
        address: "收货地址"
        // tool: "操作"
      },
      // 订单详情数据
      moreOrderDetail: {},
      sellerInfo: {
        id: "",
        customerName: "",
      },
      // 控制订单详情弹窗的显示
      dialogVisible: false
    }
  },
  created() { },
  methods: {
    getOrderList(currentPageNum, currentPageSize) {
      this.getRequest("/order/api/getOrderList", {
        pageNum: currentPageNum,
        pageSize: currentPageSize
      }).then(res => {
        if (res.code === 200 && res.msg === "success") {
          console.log(res);
          this.orderList = res.data;
          this.totalNum = res.total;
        }
      });
    },
    // 分页监听函数
    handleSizeChange(val) {
      this.currentPageSize = val;
      this.getOrderList(this.currentPageNum, this.currentPageSize);
    },
    //分页监听函数
    handleCurrentChange(val) {
      this.currentPageNum = val;
      this.getOrderList(this.currentPageNum, this.currentPageSize);
    },
    moreDetail(row) {
      console.log(row.id);
      this.getRequest("/order/api/getOrderDetail/" + row.id)
        .then(res => {
          if (res.code == 200 && res.msg == "success") {


            this.moreOrderDetail = res.data;
            this.sellerInfo.id = res.data.sellerBean.id;




          } else {
            this.$confirm("获取订单详情失败", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            });
          }
        });
    }


  },
  mounted() {
    this.getOrderList(this.currentPageNum, this.currentPageSize);
  }
}
</script>

<style scoped>
</style>